<template>
  <Card dis-hover>
    <div class="tableTop" slot="title">
        <p>审核管理</p>
    </div>
    <div>
      <Table border :columns="columns" :data="checkData" :loading="loading" stripe >
        <template slot="action" slot-scope="scope">
          <Tooltip content="审核通过" placement="top">
            <Button type="primary" icon="md-checkmark" class="btn" @click="showApprovedBox(scope.row.transId)"></Button>
          </Tooltip>
          <Tooltip content="拒绝通过" placement="top">
            <Button type="error" icon="md-close" @click="showRefusedBox(scope.row.transId)"></Button>
          </Tooltip>
        </template>
      </Table>
    </div>
    <!-- 确认对话框 -->
    <Modal title="确定信息" class-name="vertical-center-modal" v-model="showApproved" :width="300">
      <p slot="header" style="text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>提交审核</span>
      </p>
      <div style="text-align:center">
        <p>请确认审核通过该用户</p>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" long @click="approvedInspector">通过</Button>
      </div>
    </Modal>
    <!-- 拒绝对话框 -->
    <Modal title="确定信息" class-name="vertical-center-modal" v-model="showRefused" :width="300">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>提交审核</span>
      </p>
      <div style="text-align:center">
        <p>请确认拒绝通过该用户</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="refusedInspector">拒绝</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
          title: '审核编号',
          key: 'transId',
          sortable: true
        },
        {
          title:'openId',
          key:'openid',
          width:300
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '性别',
          key: 'sex'
      },
        {
          title: '电话',
          key: 'phone',
          width:150
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          width:150
        }
      ],
      checkData:[],
      total: 0,
      page: 0,
      loading: false,
      showApproved: false,
      showRefused: false,
      transId:''
    }
  },
  created(){
    this.getCheckData()
  },
  methods:{
    showApprovedBox(transId){
      this.showApproved=true
      this.transId=transId
    },
    showRefusedBox(transId){
      this.showRefused=true
      this.transId=transId
    },
    async getCheckData(){
      this.loading=true
      const {data:res} = await this.$http.get(`/check/checkData/${this.page}`)
      // console.log(res)
      this.checkData = res.data.content
      this.total=res.data.totalElements
      this.loading=false
    },
    currentPage(newPage){
      this.page = newPage-1
      this.getUserList()
    },
    async approvedInspector(){
      const {data:res} = await this.$http.get(`/check/approved/${this.transId}`)
      if(res.errorCode !== 200)return this.$message.error('提交失败')
      this.getCheckData()
      this.showApproved=false
      this.$message.success('提交成功')
    },
    async refusedInspector(){
      const {data:res} = await this.$http.get(`/check/refused/${this.transId}`)
      if(res.errorCode !== 200)return this.$message.error('提交失败')
      this.getCheckData()
      this.showRefused=false
      this.$message.success('提交成功')
    }
  }
}
</script>

<style>
.btn{
    margin: 0 8px;
}
</style>